<template>
  <device-common>
    <template v-slot:state>
      <childs />
    </template>
    <div class="h12" />
    <el-card>
      <div slot="header" class="clearfix">
        <b>设备控制</b>
      </div>
      <div class="action-container">
        <el-form size="small">
          <el-form-item label="控制类型">
            <el-radio-group v-model="actionType" @change="changeActionType">
              <el-radio-button
                v-for="(item,index) in actionTypes"
                :key="index"
                :label="item.value"
              >{{ item.text }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="控制对象">
            <el-select v-model="actionIndex">
              <el-option
                v-for="(item,index)
                  in actionItems"
                :key="index"
                :label="`${item.id} - ${item.name}`"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item v-if="['Station','Block'].includes(actionType)" label="控制时长">
            <el-input
              v-model="RunTime"
              placeholder="控制时长"
              type="number"
              style="width:300px;margin-right:12px;"
            >
              <template slot="append">分钟</template>
            </el-input>
            <el-radio-group v-model="RunTime">
              <el-radio-button
                v-for="(item,index) in runtimes"
                :key="index"
                :label="item.value"
              >{{ item.text }}</el-radio-button>
            </el-radio-group>
          </el-form-item>
          <el-form-item style="margin-bottom:0;">
            <el-button type="primary" icon="el-icon-caret-right" @click="start">启动</el-button>
            <el-button type="danger" icon="el-icon-switch-button" @click="stop">停止</el-button>
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </device-common>
</template>

<script>
import DeviceCommon from '@/components/Device/common'
import Childs from './component/childs'
import { hunterActionTypes, stations, blocks, programs, runtimes } from '@/utils/constant'
import { startHanterDrip, stopHanterDrip } from '@/api/device'
export default {
  components: {
    DeviceCommon,
    Childs
  },
  data() {
    return {
      actionTypes: hunterActionTypes,
      actionType: 'Station',
      actionIndex: 1,
      actionItems: stations,
      runtimes,
      RunTime: 1
    }
  },
  methods: {
    changeActionType(val) {
      switch (val) {
        case 'Station':
          this.actionItems = stations
          break
        case 'Block':
          this.actionItems = blocks
          break
        case 'Program':
          this.actionItems = programs
          break
      }
    },
    async start() {
      this.$confirm('确定要执行此操作吗？', '操作提醒', { type: 'warning' }).then(res => {
        const action = {
          [this.actionType]: this.actionIndex,
          RunTime: this.RunTime * 60,
          url: `Start${this.actionType}`
        }
        startHanterDrip(action).then(res => {
          this.$message({ message: res.msg, type: 'success', showClose: true })
        })
      })
    },
    async stop() {
      this.$confirm('确定要执行此操作吗？', '操作提醒', { type: 'warning' }).then(res => {
        stopHanterDrip().then(res => {
          this.$message({ message: res.msg, type: 'success', showClose: true })
        })
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.state-container{
  margin-bottom:12px;
}
</style>
